<template>
	<view class="details">
		<van-cell-group>
			<van-cell title="订单状态" >
				<view :class="info.statusName.color">{{info.stateName}}</view>
			</van-cell>
			<van-cell title="交易数量" :value="info.nums" />
			<van-cell title="交易金额" :value="allprice" />
			<block  v-if="info.status >= 2">
				<van-cell title="对方姓名" :value="info.name" />
				<van-cell title="对方电话" :value="info.phone" @tap="onPhone(info.phone)" />
				<van-cell title="对方支付宝号" :value="info.aliAccount" @tap="onClipbard(info.aliAccount)" />
				<van-cell title="交易时间" :value="info.statusName.stateTime" 	:border="false"/>
			</block>
		</van-cell-group>
		<block v-if="info.status === 3">
			<view class="countdown">
				<uni-countdown color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" :show-day="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
			</view>
		</block>
		<block v-if="info.status >= 3">
			<view class="licenseItem-title">对方上传打款截图</view>
			<view class="licenseItem-wrpa" @tap="onPreviewImage(info.bimage)">
				<view class="licenseItem van-hairline--left">
					<view class="licenseItem">
						<image :src="info.bimage" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</block>
		<block v-if="info.status === 3">
			<view class="details-btn">
				<button class="base-btn" @tap="onSubmitReceive">确定收款</button>
			</view>
			<view class="details-btn red">
				<button class="base-btn" @tap="onSubmit">投诉</button>
			</view>
		</block>
	</view>
</template>

<script>
import { tradingState } from '../../../../common/utils/state.js'
import { mapGetters } from 'vuex';
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
export default {
	components: {uniCountdown},
	data() {
		return {
			id: '',
			tid: '',
			info: '',
			Licensel: '',
			loading: false,
			hour: 0,
			minute: 0,
			second: 0
		};
	},
	onLoad (key) {
		this.id = key.id
		this.mySellIng()
	},
	computed: {
		allprice () {
			const us = this.info.allprice
			return  us + ' RMB'
		}
	},
	methods: {
		onLicensel() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'],
				success: res => {
					this.Licensel = res.tempFilePaths[0];
				}
			});
		},
		onSubmit () {
			uni.showModal({
				title: '提示',
				content: `投诉对方上传假打款截图?`,
				success: (mres) => {
					if (mres.confirm) {
						if (this.loading) return
						this.loading = true
						uni.showLoading({title: ''})
						this.$http.comtrading({
							id: this.id
						}).then(res => {
							const data = res.data
							this.loading = false
							if (data.success) {
								uni.showToast({
									title: '举报假截图成功'
								});
								return
							}
							uni.showToast({
								title: data.errMsg,
								icon: 'none'
							})
						})	
					}
				}
			})
		},
		onPhone (phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		onSubmitReceive () {
			uni.showModal({
				title: '提示',
				content: '确认收到对方打款？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({title: ''})
						this.$http.receive({
							id: this.id
						}).then(res => {
							const data = res.data
							// uni.hideLoading()
							if (data.success) {
								uni.showToast({
									title: '收款确认成功'
								});
								this.info.status = 4
								this.info.stateName = '已完成'
								this.info.statusName = tradingState(this.info.status)
								return
							}
							uni.showToast({
								title: data.errMsg,
								icon: 'none'
							});
						})
					}
				}
			});
		},
		mySellIng() {
			uni.showLoading({
				title: ''
			});
			this.$http.tradeDetail({id: this.id}).then(res => {
				uni.hideLoading();
				const data = res.data;
				if (data.success) {
					data.data.bimage = this.$imgUrl+data.data.bimage
					data.data.simage = this.$imgUrl+data.data.simage
					data.data.statusName = tradingState(data.data.status, data.data)
					this.info = data.data;
					this.getTimes(this.info.statusName.stateTime)
					return;
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		onPreviewImage (img) {
			uni.previewImage({
				urls: [img]
			});
		},
		onClipbard (alipay) {
			uni.setClipboardData({
				data: alipay,
				success: function () {
					uni.showToast({
						title: "复制成功",
						icon: 'none'
					});
				}
			});
		},
		getTimes (key) {
			key = key.replace(/\-/g, "/")
			const date1 = +new Date(key) + 2 * 3600 * 1000
			const date2 = +new Date()
			const date3 = date1 - date2
			const leave1 = date3 % (24 * 3600 * 1000)    //时数
			const leave2 = leave1 % (3600*1000) // 分数
			const leave3 = leave2%(60*1000)      //毫秒数
			
			this.hour = Math.floor(leave1/(3600*1000))
			this.minute = Math.floor(leave2/(60*1000))
			this.second = Math.round(leave3/1000)
		}
	}
};
</script>

<style lang="scss" scoped>
	@import '../details.scss';
	.details-btn {
		margin-top: 70upx;
	}
	.red {
		margin-top: 50upx;
		padding-bottom: 0;
		.base-btn {
			background-color: red;
		}
	}
</style>
